<template>
  <div class="nav_outer">
    <Header>岗位详情</Header>
    <div class="banner" style="height:5rem;overflow:hidden;">
      <img :src="detail.photo | imgpre" style="width:100%;" v-if="loaded && detail.photo"/>
      <img :src="detail.photo || defaultplace" style="width:100%;" v-if="loaded && !detail.photo"/>
    </div>
    <div class="content" @click="payshow=false">
      <div class="base">
        <div class="flex_bet">
          <span style="font-size:1.2em;font-weight:bold;">{{detail.title}}</span>
          <img src="../assets/img/fenxiang@2x.png" alt @click="shareclick" v-if="!isInmini"/>
        </div>
        <div class="base_price" @click="payshowclick">
          {{detail.salaryTips}}元/月
          <img src="../assets/img/gongzi@2x.png" alt />
          <div class="price_des" v-show="payshow" @click="predefault">
            <div>薪资说明</div>
            <div>{{detail.wageDesc}}</div>
          </div>
        </div>
      </div>
      <div class="jobrequires">
        <div class="jobrequire">
          <h5>任职要求</h5>
          <p v-html="detail.requirement">
          </p>
        </div>
        <div class="jobrequire">
          <h5>工作介绍</h5>
          <p>{{detail.remarks}}</p>
        </div>
        <div class="jobrequire">
          <h5>福利待遇</h5>
          <p>{{detail.welfareDesc}}</p>
        </div>
        <div class="jobrequire">
          <h5>注意事项</h5>
          <p>{{detail.tips}}</p>
        </div>
        <div class="jobrequire">
          <h5>企业简介</h5>
          <p>{{detail.summary}}</p>
        </div>
      </div>
      <div class="guesslike" v-show="joblists.length">
        <div class="guess_title">猜你喜欢</div>
        <div class="jobs likejobs">
          <div class="job" v-for="item in joblists" v-bind:key="item.id" :data-id="item.id" v-show="item.id!=detail.id">
            <p class="job_title">{{item.title}}</p>
            <p class="job_tag">
              <span v-for="jtag in (item.positionTags.split(','))" v-bind:key="jtag">{{jtag}}</span>
            </p>
            <span class="common_statu" v-if="item.marketingType==0">入职奖</span>
            <div class="flex_bet">
              <span class="job_price">{{item.salaryTips}}元/月</span>
            </div>
            <div class="flex_bet tagsouter">
              <div class="jobtags">
                <span v-for="tag in (item.welfareTags.split(','))" v-bind:key="tag">{{tag}}</span>
              </div>
              <span style="color:#bbb;font-size:0.9em;">{{item.cityName}}·{{ (item.updateDate || item.createDate) | today}}</span>
            </div>
          </div>
          <div class="refresh"></div>
        </div>
      </div>
      <div class="bttomtab flex_auto">
        <div class="tab" @click="call" v-if="isInAPP">
          <img src="../assets/img/icon-test@2x.png" alt />
          <p>客服</p>
        </div>
        <a class="tab" :href="'tel:'+consult" v-if="!isInAPP">
          <img src="../assets/img/icon-test@2x.png" alt />
          <p>客服</p>
        </a>
        <div class="tab" @click="switchcollect">
          <img src="../assets/img/shoucang-2@2x.png" alt v-if="!ifcollect" />
          <img src="../assets/img/shoucang-3@2x.png" alt v-if="ifcollect" />
          <p>收藏</p>
        </div>
        <div class="getbtn" @click="baomin" v-if="!ifJoin">立即报名</div>
        <div class="getbtn join" v-else>已报名</div>
      </div>
    </div>
    <div class="codebox" v-show="wxshow">
      <p class="name">{{detail.title}}</p>
      <div class="code_wrap">
        <img :src="qrcode" alt />
      </div>
      <p>微信扫一扫</p>
      <div class="close" @click="wxshow=false">X</div>
    </div>
    <!-- <div class="sharebox" v-show="share">
      <div class="share_li" @click="showwxclick">
        <img src="../assets/img/weixin@2x.png" alt />
        <p>微信</p>
      </div>
      <div class="share_li">
        <img :src="qrcode" alt />
        <p>二维码</p>
      </div>
      <div class="share_li">
        <img src="../assets/img/QQ@2x.png" alt />
        <p>QQ</p>
      </div>
      <div class="share_li">
        <img src="../assets/img/kongjian-2@2x.png" alt />
        <p>QQ空间</p>
      </div>
    </div> -->
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      defaultplace: require('../assets/img/jobplace.jpeg'),
      share: false,
      wxshow: false,
      payshow: false,
      detail: { requirement: "" },
      ifcollect: false,
      collectid: "",
      gid: "",
      qrcode: '',
      pageNum: 1,
      pageSize: 10,
      joblists: [],
      totalPage: 1,
      loading: false,
      pullre:'',
      uid: this.$store.state.user.id,
      loaded:false,
      ifJoin: false,
      isInAPP: this.app.isInAPP,
      consult:'',
      isInmini: this.app.isInmini
    };
  },
  mounted() {
    let mui = this.mui,
      that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadJobs();
    }});
    mui(".likejobs").on("tap", ".job", function() {
        var id = this.getAttribute("data-id");
        that.$router.replace({ path: "/gangwei/" + id });
      });
  },
  created() {
    let gid = (this.gid = this.$route.params.id);
    this.loadDetail(gid);
    this.createCode();
    this.loadJobs();
    if(this.uid){
      this.loadIfcollect();
      this.loadIfjoin(gid);
      this.loadConsult();
    }
  },
  methods: {
    loadConsult() {
      let consult = localStorage.getItem('consult');
      if(!consult){
        this.Http.get("/yzj/personal/app/tracker", null).then(res => {
          localStorage.setItem('consult',res.phone);
          this.consult = res.phone;
        });
      }else{
        this.consult = consult;
      }
    },
    loadJobs() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/enrollment/page", {
        current: that.pageNum,
        size: that.pageSize,
        type: 1,
        cityName: this.$store.state.locate || '苏州',
        status: 1
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.joblists = res.object;
          } else {
            that.joblists = that.joblists.concat(res.object);
          }
          that.totalPage = res.totalPage;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    },
    loadDetail(gid) {
      this.Http2.get(`/mobile/enrollment/${gid}`, null).then(
        res => {
          this.loaded = true;
          this.detail = res;
          this.detail.requirement = this.detail.requirement.replace(/\n/g,'<br/>');
          this.detail.remarks = this.detail.remarks.replace(/\n/g,'<br/>');
          this.loaded = true;
        },
        () => {}
      );
    },
    loadIfjoin(gid){
      this.Http.get(`/yzj/intention_factory/check`, {recruitmentId:gid}).then(
        res => {
          this.ifJoin = res.result;
        }
      );
    },
    shareclick() {
      let that=this;
      if(!this.uid){
        this.$router.push({ path: '/login' });
        return
      }
      this.app.onShare && this.app.onShare({
        type: 2,
        urllink: location.href+'?shareId='+this.uid,
        title: this.detail.title || '',
        desc: this.detail.positionDesc || this.detail.title || '',
        imgurl: 'http://106.14.145.196:8686/yzj/image/download/b9ecb0b0adb57f113f13a173f9971f0c.png',
        path: `/pages/index/index?shareId=${this.uid}&gid=${this.gid}`,
        miniType: 0//0正式 1开发  2体验
      },function(){
        that.wxshow = true;
      });
    },
    payshowclick(event) {
      event.stopPropagation();
      this.payshow = true;
    },
    loadIfcollect() {
      let uid = localStorage.getItem("uid");
      if(!uid){
        return;
      }
      this.Http2.jsonput("/mobile/usercollection/isCollection", JSON.stringify({
        userId: uid || 0,
        collectionId: this.gid,
        type: 0
      })).then(
        res => {
          this.ifcollect = !!res.collectionId;
          this.collectid = res.id;
        },
        () => {}
      );
    },
    switchcollect() {
      if(!this.uid){
        if(this.app.isInmini){//如果是在小程序里,跳转到登录页面
          wx.miniProgram.navigateTo({
            url: '../login/index'
          })
        }else{
          this.$router.push({ path: '/login' });
        }
        return
      }
      let url, method, data;
      if (this.ifcollect) {
        url = `/mobile/usercollection/removeById/${this.collectid}`;
        method = "delete";
        data = null;
      } else {
        url = `/mobile/usercollection/save`;
        method = "jsonpost";
        data = JSON.stringify({
          collectionId: this.gid,
          type: 0,
          userId: localStorage.getItem("uid") || 0
        });
      }
      this.Http2[method](url, data).then(
        res => {
          this.loadIfcollect();
        },
        () => {}
      );
    },
    baomin() {
      if(!this.uid){
        if(this.app.isInmini){//如果是在小程序里,跳转到登录页面
          wx.miniProgram.navigateTo({
            url: '../login/index'
          })
        }else{
          this.$router.push({ path: '/login' });
        }
        return
      }
      this.Http.post(`/yzj/intention_factory/${this.gid}`, null).then(res => {
        this.mui.toast('报名成功');
        this.ifJoin = true;
      });
    },
    createCode(){
      if(!this.uid){return}
      this.Http.get(`/yzj/zxing`, {
        content: location.href+'?shareId='+this.uid
      }).then(res => {
        this.qrcode = 'data:image/png;base64,'+res;
      });
    },
    predefault(evnet){
      event.stopPropagation();
    },
    call(){
      if(!this.uid){
        if(this.app.isInmini){//如果是在小程序里,跳转到登录页面
          wx.miniProgram.navigateTo({
            url: '../login/index'
          })
        }else{
          this.$router.push({ path: '/login' });
        }
        return
      }
      if(this.app.isInAPP){
        this.app.callphone && this.app.callphone(this.consult);
      }else{
        
      }
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
      .content .bttomtab {
        padding-bottom: .6rem;
      }
      .nav_outer {
        padding-bottom: 2rem!important;
      }
  }
.nav_outer {
  padding-bottom: px2em(100);
}
.mui-slider-group {
  height: px2em(340);
  background: #ccc;
}
.mui-slider-item {
  background: #ccc;
}
.content {
  .base {
    background: #fff;
    padding: px2em(30);
    margin: 3px 0 1px;
    img {
      width: px2em(40);
    }
  }
  .base_price {
    font-size: 1.2em;
    color: #ff0000;
    margin-top: px2em(25);
    position: relative;
    > img {
      width: px2em(34);
      vertical-align: middle;
      margin-left: px2em(15);
      margin-top: -3px;
    }
  }
  .price_des {
    position: absolute;
    top: 100%;
    left: px2em(110);
    width: px2em(500);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 15px #ccc;
    > div {
      margin: 0 px2em(20);
      color: #333;
      font-size: 14px;
      padding: px2em(30) px2em(16);
    }
    > div:first-child {
      border-bottom: 1px dashed #eee;
    }
  }
  .jobrequire {
    background: #fff;
    padding: px2em(26);
    margin-bottom: 1px;
    h5 {
      background: url(../assets/img/mark@2x.png) no-repeat;
      left: 0;
      top: 0;
      background-size: px2em(26) auto;
      padding: 6px;
      font-size: 1.05em;
      font-weight: bold;
      color: #333;
    }
    p {
      color: #333;
      margin-bottom: 5px;
      padding-left: 6px;
    }
  }
  
  .bttomtab {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .tab {
      width: px2em(110);
      text-align: center;
      > p {
        margin-bottom: 0;
        font-size: 0.7em;
        font-weight: bold;
        color: #333;
      }
    }
    img {
      height: px2em(32);
      margin-top: px2em(16);
    }
    .getbtn {
      height: px2em(72);
      line-height: px2em(72);
      color: #fff;
      text-align: center;
      background: #ffaf1c;
      flex: 1;
      border-radius: 10px;
      margin: px2em(14) px2em(32);
      &.join {
        background: #cdcdcd;
      }
    }
  }
  .guesslike {
    background: #fff;
    padding-top: px2em(30);
  }
  .guess_title {
    margin: 0 px2em(30);
    border-left: 5px solid #507bf8;
    padding-left: 5px;
    font-size: 1.1em;
  }
  .jobs {
    padding-left: 5px;
    .job {
      margin: px2em(12) 0;
      background: #fff;
      padding: px2em(15) px2em(30);
      position: relative;
      border-bottom: 1px solid #eee;
    }
    .job_title {
      font-weight: bold;
      color: #333;
      margin-bottom: 2px;
    }
    .job_price {
      font-size: 1.2em;
      color: red;
    }
    .common_statu {
      position: absolute;
      right: px2em(30);
      top: 50%;
      margin-top: -px2em(22);
    }
    .tagsouter {
      margin-top: px2em(28);
    }
    .jobtags > span {
      height: px2em(40);
      border-radius: px2em(23);
      line-height: px2em(40);
      color: #00b9ff;
      border: 1px solid #00b9ff;
      padding: 0 5px;
      font-size: 0.7em;
      margin-right: 6px;
    }
    .address {
      font-size: 0.8em;
      color: #aeafaf;
    }
  }
}
.codebox {
  /*display: none;*/
  box-shadow: 0 0 15px #ccc;
  width: px2em(640);
  height: px2em(500);
  text-align: center;
  position: fixed;
  z-index: 100;
  top: 50%;
  margin-top: -px2em(250);
  left: px2em(55);
  background: #fff;
  border-radius: 10px;
  .name {
    margin: px2em(60) 0 px2em(24);
    color: #333;
    font-weight: bold;
  }
  img {
    width: 100%;
  }
  .code_wrap {
    width: px2em(260);
    height: px2em(260);
    margin: 0 auto;
  }
  .close{
        position: absolute;
        width: 50px;
        height:50px;
        font-size: 20px;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 50px;
      }
}
.sharebox {
  box-shadow: 0 0 15px #ccc;
  display: flex;
  background: #fff;
  border-radius: 15px;
  padding: px2em(52) 0;
  width: px2em(640);
  position: fixed;
  bottom: 0;
  left: px2em(55);
  .share_li {
    > img {
      width: px2em(60);
      height: px2em(60);
    }
    flex: 1;
    text-align: center;
    p {
      margin-bottom: 0;
    }
  }
}
</style>